<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/callus.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=uexWikNd5dVKYza1gGHGkzn78rCdI7lC"></script>
    <script src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
</head>
<body>
<div id="top"></div>
<div class="middle">
    <div>
        <div class="title">联系我们</div>
        <div>
            <div id="map">

            </div>
            <div>
                <div>
                    <span>我们会做的更好!</span> <span>WE WILL po BETTER</span>
                </div>
                <div> 如果您对我们有什么建议、投诉、需求，可以通过留言告诉我们，我们会在第一时间了解并及时 与您联系。</div>
            </div>

        </div>
    </div>
</div>
<div id="foot"></div>
</body>
</html>
<script>
    var map = new BMapGL.Map('map'); // 创建Map实例
    var point = new BMapGL.Point(104.066141, 30.579155);
    map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    var marker = new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "故宫博物院" , // 信息窗口标题
        message:"这里是故宫"
    }
    var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
    // 百度地图API功能
    // var map = new BMap.Map('map');
    // var poi = new BMap.Point(104.066141, 30.579155);
    // map.centerAndZoom(poi, 18);
    // map.enableScrollWheelZoom();
    // var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
    //     '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
    //     '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
    //     '</div>';
    //
    // //创建检索信息窗口对象
    // // var searchInfoWindow = null;
    // var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
    //     title: "百度大厦",      //标题
    //     width: 290,             //宽度
    //     height: 105,              //高度
    //     panel: "panel",         //检索结果面板
    //     enableAutoPan: true,     //自动平移
    //     searchTypes: [
    //         BMAPLIB_TAB_SEARCH,   //周边检索
    //         BMAPLIB_TAB_TO_HERE,  //到这里去
    //         BMAPLIB_TAB_FROM_HERE //从这里出发
    //     ]
    // });
    // var marker = new BMap.Marker(poi); //创建marker对象
    // marker.enableDragging(); //marker可拖拽
    // marker.addEventListener("click", function (e) {
    //     searchInfoWindow.open(marker);
    // })
    // map.addOverlay(marker); //在地图中添加marker
</script>